/*
 * @Description: “菜单”页面增查改操作
 * @Author: 谢涛
 * @Date: 2019-07-11 11:15:38
 * @LastEditTime: 2020-02-25 17:35:02
 * @LastEditors: Please set LastEditors
 */

import React, { Component } from 'react'
import '@ant-design/compatible/assets/index.css';
import {Form, Input, Select, Modal, Col, Row, message, InputNumber, Radio, Button} from 'antd';
import '../../../layouts/handleList.css'
import { menuApi } from '@/services/basic'
import {ButtonLock} from "../../../components/BaseComponent/forms";



const Option = Select.Option;
class EditItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: undefined,
      visible: false,
      SjcdMc: [],//上级菜单名称数据
      dj: undefined,//选区的当前菜单的等级
      sjid: undefined,//上级菜单的id(回传默认值)
      handler: undefined,//当前正在执行的操作类型
    }
  }

  //弹出操作页面
  showModal = (handler, record) => {
    if (record) {//如果有record传过来 说明一定是查看或者更新操作
      const { id } = record;
      this.setState({ visible: true, id, handler })
      this.handleView(id);
    } else {//如果是新增操作 那直接展示弹出框 赋值操作类型
      this.setState({ visible: true, handler })
    }
  }

  //关闭操作页面
  hideModal = () => {
    this.setState({
      id: undefined,
      visible: false,
      SjcdMc: [],//上级菜单名称数据
      dj: undefined,//选区的当前菜单的等级
      sjid: undefined,//上级菜单的id(回传默认值)
      handler: undefined,//当前正在执行的操作类型
    },() => 
        this.form.resetFields()
    )
  }

  //Modal框自带的取消操作
  handleCancel = () => {
    this.hideModal();
  }

  //Modal框自带的确认操作
  handleOk = () => {
    const { handler, id, dj } = this.state
    const requestType = handler === 'create' ? 'post' : 'put'
    let newItem = this.form.getFieldsValue();
    if (dj === 1) newItem.sjid = 0;
    newItem.id = id;
    this.form.validateFields().then(values => {
        menuApi[requestType](newItem)
          .then((res) => {
            if (res.code === '1') {
              this.props.editItemDone();
              this.hideModal()
              message.success("操作成功");
            } else message.error(`操作失败 ${res.msg}`)
          })
    })
    .catch(error => {
        // eslint-disable-next-line
        console.dir(error)
    })
  }

  //查看单条
  handleView = (id) => {
    if (id) {
      menuApi.get(id)
        .then((res) => {
          let { mc, dj, xh, tb, tzdz, mjbz, btnbz, bz, sjid, sjName } = res.data;
          this.form.setFieldsValue({ mc, dj, xh, tb, tzdz, mjbz, sjid, btnbz, bz });
          this.setState({
            visible: true,
            id,
            SjcdMc: <Option key={sjid} value={sjid}>{sjName}</Option>,
            sjid,
            dj
          })
        })
    }
  }

  onSjidFocus = () => {
    menuApi.getParent(this.state.dj).then((res) => {
      if (res.data !== null && res.data.length !== 0) {
        const SjcdMc = res.data.map(item => <Option key={item.id} value={item.id} >{item.mc}</Option>)
        this.setState({ SjcdMc })
      } else { message.warning('暂无数据') }
    })
  }

  onDjChange = (value) => {
    this.setState({ dj: value, sjid: undefined })
    this.form.resetFields(['sjid'])
    if (value === 4) {
        this.form.setFieldsValue({
            btnbz: '1',
            mjbz: '1'
        })
    }
  }

  render() {
    const { handler, dj } = this.state;

    return (
      <div className='handle-header'>
        <Modal title=""
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
         footer={this.state.handler === "view" ? null : [
           <Button onClick={this.handleCancel}>取消</Button>,
           <ButtonLock onClick={this.handleOk} type="primary">确定</ButtonLock>
         ]}
          width="800px"
          style={{ top: 80 }}
          maskClosable={false}
          className='handleList'
        >
          <div className="formHeader">
            <span className='handle-title'>{`${handler === 'view' ? '查看' : handler === 'create' ? '新增' : '更新'}菜单`}</span>
          </div>

          <Form autoComplete="off" onSubmit={this.handleOk} ref={form => this.form = form }>
            <Row gutter={8}>
              <Col span={12}>
                <Form.Item label="菜单名称"
                    name="mc"
                    rules={[{ required: true, message: '此为必填项' }]}
                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                >
                  <Input
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder='请输入' />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="等级"
                    name="dj"
                    rules={[{ required: true, message: '此为必填项' }]}
                >
                    <Select
                      disabled={handler === 'view' ? true : false}
                      allowClear={handler === 'view' ? false : true}
                      placeholder='请选择'
                      onChange={this.onDjChange}>
                      {/* <Option value={1}>一级</Option>
                      <Option value={2}>二级</Option>
                      <Option value={3}>三级</Option>
                      <Option value={4}>四级</Option> */}
                      {
                            this.props.bookRender('cddj')
                        }
                    </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8}>
              <Col span={12}>
                <Form.Item label="上级菜单"
                    name="sjid"
                    rules={[{ required: this.state.dj === 1 ? false : true, message: '此为必填项' }]}
                    initialValue={this.state.sjid}
                >
                    <Select
                      disabled={handler === 'view' ? true : (dj === 1 || dj === undefined ? true : false)}
                      allowClear={handler === 'view' ? false : true}
                      placeholder='请选择'
                      filterOption={false}
                      notFoundContent={null}
                      showSearch={false}
                      onFocus={this.onSjidFocus}
                    >
                      {this.state.SjcdMc}
                    </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="序号"
                    name="xh"
                    rules={[{ required: true, message: '此为必填项' }]}
                >
                  <InputNumber
                    min={0}
                    max={99}
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder='请输入' />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8}>
              <Col span={12}>
                <Form.Item label="图标"
                    name="tb"
                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                >
                  <Input
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder='请输入' />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="URL"
                    name="tzdz"
                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                >
                  <Input
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder='请输入' />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8}>
              <Col span={12}>
                <Form.Item label="末级标志"
                    name="mjbz"
                    rules={[{ required: this.state.dj === 1 ? false : true, message: '此为必填项' }]}
                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                >
                    <Radio.Group disabled={handler === 'view' || this.state.dj === 4 ? true : false}
                        allowClear={handler === 'view' ? false : true}
                    >
                        <Radio value="0">否</Radio>
                        <Radio value="1">是</Radio>
                    </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="按钮标志"
                    name="btnbz"
                    rules={[{ required: this.state.dj === 1 ? false : true, message: '此为必填项' }]}
                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                >
                    <Radio.Group disabled={handler === 'view' || this.state.dj === 4 ? true : false}
                        allowClear={handler === 'view' ? false : true}
                    >
                        <Radio value="0">否</Radio>
                        <Radio value="1">是</Radio>
                    </Radio.Group>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8}>
              <Col span={12}>
                <Form.Item label="备注"
                    name="bz"
                >
                  <Input
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder='请输入' />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Modal>
      </div>
    );
  }
}
export default EditItem